<template>
  <div class="box">
    <header class="head">
        <router-link tag="span" to="/Index" class="iconfont icon-zyojiantou"></router-link>
        <p>发现</p>
    </header>
    <section class="erhe">
        <div class="heyi">
            <div class="_heLeft">
                <h3>金币商城</h3>
                <p>0元好物在这里</p>
                <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/" class="img1">
            </div>
            <div class="_heright">
                <div class="youyi">
                    <div class="wenzi">
                        <h3>必吃爆料</h3>
                        <p>最夯外卖指南</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/" class="img2">
                </div>
                <div class="youer">
                    <div class="wenzi">
                        <h3>推荐有奖</h3>
                        <p>5元现金拿不停</p>
                    </div> 
                    <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" class="img3">
                </div>
            </div>
        </div>
        <div class="heer">
            <div class="cne">
                <div class="lss">
                    <h3>周边优惠</h3>
                    <p>领取口啤好卷</p>
                </div>
                <img src="https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/" class="img4">
            </div>
            <div class="_cne">
                <div class="_lss">
                    <h3>百元红包</h3>
                    <p>兴业银行联名卡</p>
                </div>
                <img src="https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/" class="img5">
            </div>
        </div>
    </section>
    <figure class="fige">
        <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/">    
    </figure>  
    <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>美食热推</h6>
       </div>
       <p>你的口味，我都懂得</p>
    </section>
    <section class="kouwei">
      <dl v-for='(d,g) in ds' :key="g">
         <dt><img :src="d.imgUrl" alt=""></dt>
         <dd>{{d.ming}}</dd>
         <dd>{{d.nem}}</dd>     
      </dl> 
    </section> 
     <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>天天特价</h6>
       </div>
       <p>特价商品，一网打尽</p>
    </section>
    <section class="kouwei">
      <dl v-for='(d,e) in dw' :key="e">
         <dt><img :src="d.imgUrl" alt=""></dt>
         <dd>{{d.ming}}</dd>
         <dd>{{d.nem}}</dd>     
      </dl> 
    </section> 
    <section class="biaoti">
       <div class="ti-top">
           <p></p>
           <h6>限时好礼</h6>
       </div>
       <p>金币换好礼</p>
    </section>
    <section class="dibu">
        <dl v-for='(a,b) in ty' :key="b">
            <dt><img :src="a.imgUrl" alt=""></dt>
            <dd>{{a.ming}}</dd>
            <dd>{{a.nem}}</dd>     
        </dl> 
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ds: [
        {
          imgUrl:
            "https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/",
          ming: "南昌小炒肉盖饭",
          nem: "￥16"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/a/43/9d3a88b5f5f1a14e0e6ff40d0ac4cjpeg.jpeg?imageMogr/format/webp/",
          ming: "招牌土豆焖牛肉饭",
          nem: "￥34.8"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/2/f5/cd9c2cdc5b4cce4816a7cfcc64121jpeg.jpeg?imageMogr/format/webp/",
          ming: "安格斯肥牛饭",
          nem: "￥22"
        }
      ],
      dw: [
        {
          imgUrl:
            "https://fuss10.elemecdn.com/d/63/cc5b3f64f771715f7ac9be6ff4ea8jpeg.jpeg?imageMogr/format/webp/",
          ming: "三鲜虾仁水饺",
          nem: "￥13"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/6c/8d178f0faef3f9d8f65641091e113jpeg.jpeg?imageMogr/format/webp/",
          ming: "小米椒爱上小公鸡",
          nem: "￥21"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/cd/fe2fded643aab7f54f5b4c255069cjpeg.jpeg?imageMogr/format/webp/",
          ming: "法式鸡胸肉卷咖",
          nem: "￥16.8"
        }
      ],
      ty: [
        {
          imgUrl:
            "https://fuss10.elemecdn.com/7/c5/f595b52bc6b50c9899398dccffd42jpeg.jpeg?imageMogr/format/webp/",
          ming: "7元饿了么红包",
          nem: "￥210金币"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/8/0b/3a95765ac36e447d55409ae067b53jpeg.jpeg?imageMogr/format/webp/",
          ming: "暖冬福利，转出...",
          nem: "￥10金币"
        },
        {
          imgUrl:
            "https://fuss10.elemecdn.com/d/56/8b479231309654bfa07f28999768bjpeg.jpeg?imageMogr/format/webp/",
          ming: "阳澄湖大闸蟹礼盒",
          nem: "￥9金币"
        }
      ]
    };
  }
};
</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.box {
    font-family: "楷体";
  .head {
    width: 100%;
    .px2rem(height,100);
    background: #2199e4;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    span {
      width: 13%;
      .px2rem(height,100);
      display: flex;
      justify-content: center;
      align-items: center;
      .px2rem(font-size,42);
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
    }
    p {
      width: 100%;
      .px2rem(height,100);
      .px2rem(font-size,34);
      color: #fff;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .erhe {
    .px2rem(padding-top,100);
    background: #fff;
    .heyi {
      width: 100%;
      .px2rem(height,300);
      display: flex;
      border-bottom: 1px solid #ccc;
      ._heLeft {
        flex: 1;
        .px2rem(height,300);
        border-right: 1px solid #ccc;
        position: relative;
        h3 {
          .px2rem(font-size,40);
          font-weight: bold;
          color: #ff9900;
          .px2rem(padding-top,20);
          .px2rem(padding-left,20);
          box-sizing: border-box;
        }
        p {
          .px2rem(font-size,32);
          color: Silver;
          line-height: 1.6;
          .px2rem(padding-left,20);
          box-sizing: border-box;
        }
        .img1 {
          .px2rem(width,180);
          .px2rem(height,180);
          position: absolute;
          right: 10px;
          bottom: 10px;
        }
      }
      ._heright {
        flex: 1;
        .px2rem(height,300);
        .youyi {
          width: 100%;
          .px2rem(height,150);
          display: flex;
          justify-content: space-around;
          border-bottom: 1px solid #ccc;
          align-items: center;
          .wenzi {
            h3 {
              .px2rem(font-size,40);
              color: #ff3300;
            }
            p {
              .px2rem(font-size,32);
              color: Silver;
              line-height: 1.6;
            }
          }
          .img2 {
            .px2rem(width,110);
            .px2rem(height,110);
          }
        }
        .youer {
          width: 100%;
          .px2rem(height,150);
          display: flex;
          justify-content: space-around;
          align-items: center;
          .wenzi {
            h3 {
              .px2rem(font-size,40);
              color: #3333ff;
            }
            p {
              .px2rem(font-size,32);
              color: Silver;
              line-height: 1.6;
            }
          }
          .img3 {
            .px2rem(width,110);
            .px2rem(height,110);
          }
        }
      }
    }
    .heer {
      width: 100%;
      .px2rem(height,150);
      display: flex;
      border-bottom: 1px solid #ccc;
      .cne {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-right: 1px solid #ccc;
        .lss {
          h3 {
            .px2rem(font-size,40);
            color: #ff0000;
          }
          p {
            .px2rem(font-size,32);
            color: Silver;
            line-height: 1.6;
          }
        }
        .img4 {
          .px2rem(width,110);
          .px2rem(height,110);
        }
      }
      ._cne {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        ._lss {
          h3 {
            .px2rem(font-size,40);
            color: #ffcc66;
          }
          p {
            .px2rem(font-size,32);
            color: Silver;
            line-height: 1.6;
          }
        }
        .img5 {
          .px2rem(width,110);
          .px2rem(height,110);
        }
      }
    }
  }
  .fige {
    width: 100%;
    .px2rem(height,200);
    background: #ccc;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      .px2rem(height,170);
    }
  }
  .biaoti {
    width: 100%;
    .px2rem(height,100);
    .ti-top {
      width: 100;
      .px2rem(height,70);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      p {
        width: 30%;
        border: 1px solid #000;
      }
      h6 {
        .px2rem(font-size,34);
        font-weight: bold;
        color: #000;
        position: absolute;
        top: 28%;
        left: 40%;
        background: #fff;
      }
    }
    p {
      .px2rem(font-size,28);
      color: #ccc;
      text-align: center;
    }
  }
  .kouwei,
  .dibu {
    width: 100%;
    display: flex;
    dl {
      flex: 1;
      .px2rem(height,240);
      .px2rem(padding-top,12);
      dt {
        text-align: center;
        img {
          .px2rem(width,186);
          .px2rem(height,170);
        }
      }
      dd {
        .px2rem(font-size,29);
        .px2rem(padding-left,16);
        box-sizing: border-box;
      }
      dd:last-child {
        color: #ff0000;
        line-height: 1.6;
        font-weight: bold;
      }
    }
  }
  .dibu {
    .px2rem(padding-bottom,200);
  }
}
</style>
